<template>
  <div class="content">
    <el-row class="left-box">
      <el-form v-model="from" inline>
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            v-model="from.startTime"
            size="mini"
            :picker-options="pickerOptions0"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            v-model="from.endTime"
            size="mini"
            :picker-options="pickerOptions0"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
      <p class="data" v-show="moistureInversionShow">暂无数据</p>
      <div
        id="MoistureInversion"
        v-show="moistureInversionShows"
        style="height: 73vh"
      ></div>
    </el-row>
    <el-row class="right-box">
      <div class="weather">
        <p class="title">未来一周天气情况</p>
        <weather :node="node"></weather>
      </div>
      <div class="rainfall">
        <p class="title">未来两小时降雨</p>
        <div style="display: flex; align-items: center">
          <div class="bar">
            <EchartsBar :node="node" />
          </div>
          <div class="pie">
            <EchartsPie :node="node" />
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  getMoistureInversionList,
  getTailingPondList,
} from "~/api/safety-technology-api";
import moment from "moment";

import Weather from "./moisture-inversion-child/Weather";
import EchartsBar from "./moisture-inversion-child/EchartsBar";
import EchartsPie from "./moisture-inversion-child/EchartsPie";
export default {
  name: "SinglePointAnalysis",
  components: {
    Weather,
    EchartsBar,
    EchartsPie,
  },
  props: {
    node: Object,
  },
  data() {
    return {
      moistureInversionShows: true,
      moistureInversionShow: false,
      from: {
        startTime: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        timeType: "0",
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
    };
  },
  created() {
    if (window.sessionStorage.getItem("indexra") != null) {
      this.index = Number(window.sessionStorage.getItem("indexra"));
    }
    this.getTailingList();
  },
  methods: {
    // 获取尾矿库id
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        // console.log(this.tailingList);
        window.sessionStorage.setItem("tailingPondId", this.tailingList[0].id); //默认选中
      }
    },
    query() {
      this.drawLine();
    },
    async drawLine() {
      this.moistureInversionShows = true;
      this.moistureInversionShow = false;
      var myChart = echarts.init(document.getElementById("MoistureInversion"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.from.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.from.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getMoistureInversionList({
        monitorCode: "35080200010303",
        endTime: queryData.endTime,
        startTime: queryData.startTime,
        tailingPondId: sessionStorage.getItem("tailingPondId"),
      });
      console.log(res);
      this.moistureInversionList = res.parameter;
      var data = [];
      var theDate = [];
      //先进行赋值
      if (res.resultCode == 200) {
        this.moistureInversionShows = true;
        this.moistureInversionShow = false;
        for (let i = 0; i < this.moistureInversionList.length; i++) {
          var obj1 = new Object();
          obj1.value = this.moistureInversionList[i].pw;
          data[i] = obj1;
          var obj2 = new Object();
          obj2.value = this.moistureInversionList[i].theDate;
          theDate[i] = obj2;
        }
        data.forEach((item) => {
          item.value = item.value.toFixed(3);
        });
      } else if (res.resultCode == 204) {
        this.moistureInversionShows = false;
        this.moistureInversionShow = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }

      let option = {
        title: {
          left: "center",
          text: "水汽反演",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["33CCFF"],
        legend: {
          data: ["pw"],
          top: 30,
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              tip +=
                params[y].marker +
                params[y].seriesName +
                " : " +
                params[y].value +
                " mm<br/>";
            }
            return tip;
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: theDate,
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
          },
        ],
        yAxis: [
          {
            name: "pw(mm)",
            type: "value",
          },
        ],
        series: [
          {
            name: "pw",
            type: "bar",
            // barWidth: 40,
            data: data,
            itemStyle: {
              color: "#33CCFF", //设置所有柱状图颜色
            },
          },
        ],
        grid: {
          y2: 80,
        },
      };
      myChart.hideLoading();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
  watch: {
    index: function (indexra, oldVal) {
      window.sessionStorage.setItem("indexra", indexra);
      // console.log(val);
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 87vh;
  display: flex;
  padding: 5px 5px;
}
.left-box {
  width: 65%;
  height: 100%;
  padding: 30px 20px;
  border-right: 10px solid #f0f0f0;
}
.right-box {
  width: 35%;
  height: 100%;
  margin-right: 10px;
  padding-bottom: 10px;
}
.title {
  text-align: center;
  font-size: 20px;
  margin: 5px auto;
  font-weight: bolder;
}
.weather {
  width: 100%;
  height: 50%;
  border-bottom: 10px solid #f0f0f0;
}
.rainfall {
  width: 100%;
  height: 50%;
}

.bar {
  width: 66%;
  height: 300px;
}

.pie {
  width: 33%;
  height: 165.5px;
}
.data {
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}
</style>